<template>
	<view>
		<up-navbar
		   :title="pageTitle"
		   :autoBack="true"
		   :fixed="false"
		   class="search2-header"
		>
		  <template #right>
			  <up-icon name="search" color="#303133" size="25"></up-icon>
			  <up-icon name="shopping-cart" color="#303133" size="25"></up-icon>
		  </template>
		</up-navbar>
		<view class="search2-navbar">
			<view 
			class="search2-navbar-item" 
			:class="{'search2-navbar-active': current == item.id}"
			 v-for="item in tabList" 
			 :key="item.id"
			 @click="changeTab(item.id)"
			 >
			 {{item.name}}
			 </view>
		</view>
		<scroll-view :scroll-y="true" :style="'height:' + conHeight + 'px'" @scrolltolower="loadMore">
			<view class="search2-list">
				<block v-if="courseList.value?.length">
					<course-card :list="courseList.value"></course-card>
				</block>
				<block v-else>
					<up-empty
					        mode="search"
					        icon="http://cdn.uviewui.com/uview/empty/search.png"
					>
					</up-empty>
				</block>
			</view>
		</scroll-view>
		
	</view>
</template>

<script setup>
import {ref,reactive,toRaw, nextTick} from 'vue'
import courseCard from '../../components/common/card.vue'
import {searchCourse} from '../../api/home.js'
import { onLoad } from '@dcloudio/uni-app'
import {getViewHeight} from '../../utils/data.js'
const courseList = reactive([])
const current = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const isFinish = ref(false)
const pageTitle = ref('')
const tabList = reactive([
	{id: 0,name: '综合'},
	{id: 1,name: '最新课程'},
	{id: 2,name: '浏览最多'},
])
const conHeight = ref(0)
const getSortByParams = (id)=> {		
	if (id === 0) {
		return ''
	}
	if (id == 1) {
		return 'time-desc'
	}
	if (id == 2) {
		return 'clicks-desc'
	}
}
const getList = () =>{
		let obj =  {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			entity: {
				tags: pageTitle.value,
				sortBy: getSortByParams()
			}
		}
		searchCourse(obj).then(res=>{ 
			let list = [...res.data.pageInfo.list]
			if (list.length) {
				courseList.value = toRaw(courseList.value) ? [...toRaw(courseList.value),...list] : list
				isFinish.value = list.length < pageSize.value ?  true : false
			}
			
		})
}
const initList = ()=> {
	pageNum.value = 1
	courseList.value = []
	isFinish.value = false
	getList()
}
const changeTab = (id)=>{
	current.value = id
	initList()
}
const loadMore = ()=>{
	if (isFinish.value) return
	pageNum.value++
	getList()
}
onLoad(()=>{
	let page = getCurrentPages()
	pageTitle.value = page[page.length-1].options.keyword || ''
	initList()
	nextTick(()=>{
		conHeight.value = getViewHeight('.search2-header','.search2-navbar')
		
	})
})
</script>

<style lang="scss">
.search2-navbar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	.search2-navbar-item{
		color: #e3e3e5;
		font-size: 28rpx;
		font-weight: 700;
	}
	.search2-navbar-active{
		color: #1351fe;
	}
}
.search2-list{
	margin: 10rpx 20rpx;
}
</style>
